<template>
  <div style="display: flex">
    <div>
      <div>
        <el-select
          v-model="keywords"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
          :clearable="true"
          size="mini"
          @change="currentSelect"
          style="width: 500px"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item"
            class="one-text"
          >
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.district
            }}</span>
          </el-option>
        </el-select>
      </div>
      <div id="container" class="container"></div>
    </div>
    <div class="info-box">
      经度：{{ form.lng }}
      <br />
      纬度：{{ form.lat }}
      <p>详细地址：{{ form.address }}</p>
      <p><el-button type="primary"  @click="chooseData" class="">确定经纬度
      </el-button></p>


      <p><el-button type="primary"  @click="chooseAllData" class="">确定经纬度及地址
      </el-button></p>
    </div>
  </div>
</template>

<script>
  import AMapLoader from "@amap/amap-jsapi-loader";
  window._AMapSecurityConfig = {
    // 安全密钥
    securityJsCode: "270befa21c632a2394bbe4ce349c9b78",
  };
  export default {
    name: "TestIndex",
    data() {
      return {
        // 地图实例
        map: null,
        // 标记点
        marker: "",
        // 地址逆解析
        geoCoder: null,
        // 搜索提示
        AutoComplete: null,
        // 搜索关键字
        keywords: "",
        // 位置信息
        form: {
          lng: "",
          lat: "",
          address: "",
          adcode: "", //地区编码
        },

        // 搜索节流阀
        loading: false,
        // 搜索提示信息
        options: [],
      };
    },
    props: {
      // route object
      detail: {
        type: Object,
        required: false
      },
    },
    //父页面数据变化后  重新赋值
    watch: {
      detail: {
        deep: true,
        immediate:true,
        handler: function (newAllData) {
          this.detail = newAllData;
          this.initMap();
        }
      }
    },
    methods: {
      chooseData(){
        this.$emit('chooseData',this.form)
      },
      chooseAllData(){
        this.$emit('chooseAllData',this.form)
      },
      initMap() {
        var mapOptions = {
          viewMode: "3D", //是否为3D地图模式
          zoom: 10, //初始化地图级别
          //center: [105.602725, 37.076636], //初始化地图中心点位置
        }
        if(this.detail.lng&&this.detail.lat){
          mapOptions.center=[this.detail.lng,this.detail.lat]
          this.form.lng=this.detail.lng
          this.form.lat=this.detail.lat
        }


        AMapLoader.load({
          // 你申请的Key
          key: "770325d6e133d74c1ee453bab3093620",
          version: "2.0",
          // 需要用到的插件
          plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
        })
          .then((AMap) => {
            this.map = new AMap.Map("container",mapOptions);
            //地址逆解析插件
            this.geoCoder = new AMap.Geocoder({
              city: "010", //城市设为北京，默认：“全国”
              radius: 1000, //范围，默认：500
            });
            // 搜索提示插件
            this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
            //点击获取经纬度;
            this.map.on("click", (e) => {
              // 获取经纬度
              this.form.lng = e.lnglat.lng;
              this.form.lat = e.lnglat.lat;
              // 清除点
              this.removeMarker();
              // 标记点
              this.setMapMarker();
            });
          })
          .catch((err) => {
            // 错误
            console.log(err);
          });
      },
      // 标记点
      setMapMarker() {
        // 自动适应显示想显示的范围区域
        this.map.setFitView();
        this.marker = new AMap.Marker({
          map: this.map,
          position: [this.form.lng, this.form.lat],
        });
        // 逆解析地址
        this.toGeoCoder();
        this.map.setFitView();
        this.map.add(this.marker);
      },
      // 清除点
      removeMarker() {
        if (this.marker) {
          this.map.remove(this.marker);
        }
      },
      // 逆解析地址
      toGeoCoder() {
        let lnglat = [this.form.lng, this.form.lat];
        this.geoCoder.getAddress(lnglat, (status, result) => {
          if (status === "complete" && result.regeocode) {
            this.form.address = result.regeocode.formattedAddress;
          }
        });
      },
      // 搜索
      remoteMethod(query) {
        console.log(query);
        if (query !== "") {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.AutoComplete.search(query, (status, result) => {
              this.options = result.tips;
            });
          }, 200);
        } else {
          this.options = [];
        }
      },
      // 选中提示
      currentSelect(val) {
        // 清空时不执行后面代码
        if (!val) {
          return;
        }
        this.form = {
          lng: val.location.lng,
          lat: val.location.lat,
          address: val.district + val.address,
          adcode: val.adcode,
        };
        // 清除点
        this.removeMarker();
        // 标记点
        this.setMapMarker();
      },
    },
    mounted() {
      //this.initMap();
    },
  };
</script>

<style>
  .container {
    width: 500px;
    height: 300px;
  }
</style>
